<template>
  <div ref="editorRef" class="editor"></div>
</template>

<script>
import WangEditor from 'wangeditor';
import { getToken } from "@/utils/auth";
export default {
  props: {
    initialValue: {
      type: String,
      default: '',
    },
    data() {
      return {
        instance: null,
        editor: ''
      }
    },
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      let editor = this.$refs.editorRef;
      this.instance = new WangEditor(editor);
      this.instance.config.uploadImgServer = process.env.VUE_APP_BASE_API + "/common/upload";
      this.instance.config.uploadImgHeaders = {
        Authorization: "Bearer " + getToken()
      }
      this.instance.config.uploadFileName = "file";
      this.instance.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
      // //onchange回调函数
      // this.instance.config.onchange = function (newHtml) {
      //   console.log("change 之后最新的 html", newHtml);
      //   _this.$emit('catchData', newHtml)
      // };

      this.instance.config.uploadImgHooks = {
        // 上传图片之前
        before: function (fileData) {
          console.log(fileData);

          var dataV = new FormData(); //重点--使用formdata添加需要一起传的参数
          dataV.append("file", fileData.file);
          // 可阻止图片上传
          return {
            prevent: false,
            msg: "需要提示给用户的错误信息",
          };
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function (xhr) {
          console.log("success", xhr);
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function (xhr, editor, resData) {
          console.log("fail", resData);
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
          console.log("error", xhr, resData);
        },
        // 上传图片超时
        timeout: function (xhr) {
          console.log("timeout");
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function (insertImgFn, result) {
          // result 即服务端返回的接口
          // console.log("customInsert", result.data.fullurl);

          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          insertImgFn(result.url);
        },
      };
      this.instance.config.zIndex = 1;
      this.instance.create();


      this.instance.config.onchange = this.handleChange;
      this.setContent(this.initialValue);
    },
    setContent(content) {
      this.instance.txt.html(content);
    },
    getContent() {
      return this.instance.txt.html();
    },
    handleInsertMaterial(material) {
      const materialNode = document.createElement('div');
      materialNode.contentEditable = 'false';
      materialNode.innerHTML = material.content;

      // 绑定删除素材事件
      materialNode.addEventListener('click', () => {
        this.instance.txt.$textElem[0].removeChild(materialNode);
      });
      console.log('materialNode', materialNode);
      console.log('this.instance',this.instance);
      this.instance.txt.insertNode(materialNode);
    },
    handleChange() {
      // 触发编辑内容变化事件
      this.$emit('change', this.getContent());
    },
  },

};
</script>

<style scoped>
.editor {
  min-height: 300px;
}
</style>